<template>
  <div class="content" v-if="$store.state.app.showGress" >
    <p>食谱生成...</p>
    <div class="gressBox">
      <Progress :percent="gressInfo.currentProgress" status="active" stroke-color="#366EF4" :hide-info="true"
        stroke-width="10" />
    </div>
    <p>{{ gressInfo.currentProgress }}%</p>
    <!-- <p>成功</p> -->
    <Icon type="ios-close-circle-outline" size="18" @click="closeHandler" />
  </div>
</template>
<script>
import { reqPlanProgress } from '@/api/business/business.js'
import { mapMutations, mapActions, mapGetters } from "vuex";
export default {
	name: '',
	props: {},
	components: {},
	data() {
		return {
      gressInfo:{},
      timer:null
    }
	},
  watch:{
    '$store.state.app.showGress': {
      handler(val) {        
        if(val){
          this.timer && clearInterval(this.timer)
          this.timer = setInterval(this.getPlanProgress(), 2000);
        }
      }
    }
  },
	methods: {
    ...mapMutations([
      "setShowGress"
    ]),
		getPlanProgress() {
			reqPlanProgress().then((res) => {
        if(res.retCode == 2000){
          this.gressInfo = res.data
        }
      })
		},    
    // 关闭进度条，并清空定时器
    closeHandler(){
      this.setShowGress(false)
      clearInterval(this.timer)
    }
	},
  mounted(){
    // this.getPlanProgress()
    this.setShowGress(true)
  }
}
</script>
<style  lang='scss' scoped>
.content {
	width: 200px;
	margin-right: 10px;
	display: flex;
	align-items: center;
	// justify-content: space-around;
	color: red;
	.gressBox {
		width: 68px;
		margin: 0 8px;
	}
}
</style>